<template>
	<u-navbar
		:title-color="getValues.titleColor"
		:back-icon-color="getValues.iconLeftColor"
		:back-text-style="{color: getValues.iconLeftColor, wordBreak: 'keep-all!important'}"
		:background="{background:getStyles.background}"
		:back-icon-name="getValues.leftIcon"
		:customBack="leftBackClick"
		:back-text="location ? location.name || '' : ''"
		:border-bottom="true">
		<view class="slot-wrap">
			<u-search class="" v-model="keyword" :placeholder="getValues.searchText" :disabled="true" @click="$u.route(getValues.searchLink)"
			:show-action="false" height="62"
			:action-style="{color: '#fff'}">
			</u-search>
			<view class="navbar-right" @click="$u.route('/pagesB/message/message')">
				<view class="message-box right-item">
					<u-badge type="error" class="badge" :count="msgCount"></u-badge>
					<u-icon :color="getValues.iconRightColor" :name="getValues.rightIcon" size="50"></u-icon>
				</view>
			</view>
		</view>
	</u-navbar>
</template>

<script>
	export default {
		name: 'NavBar',
		data(){
			return {
				keyword: ''
			}
		},

		props:{
			item:{
				type: [Object, String],
				default: () => {}
			},

      location: {
        type: Object,
        default: () => {}
      },

			msgCount: {
				type: Number,
				default: 0
			}
		},
		computed:{
			getValues(){
				return this.item && this.item.value
			},
			getStyles(){
				return this.item && this.item.styles
			}
		},

		methods:{
			leftBackClick(){
				this.$u.route('pagesC/search/searchArea')
			}
		}
	}
</script>

<style lang="scss" scoped>
.slot-wrap{
	display: flex;
	flex:1;
	align-items: center;
	padding-right: 20rpx;

	.message-box {
		position: relative;

		.badge {
			position: absolute;
			top: -10rpx!important;
			right: -10rpx!important;
		}
	}

	.navbar-right {
		margin-left: 20rpx;
	}
}
</style>
